/*
window.onload = function(){
    var oSubmitbtn = $('submit-btn');
    var oMessname = $('mess-name');
    var oMesscontent = $('mess-content');
    var oMessageslist = $('messages-list');
    var sUlHtml = '';
    var str = [];
    var str1 = [];
    loadStorage();
    var oNum = $('num');

    oNum.innerHTML = localStorage.length;




    oSubmitbtn.onclick = function(){
        //console.log(111);
        //console.log(oMessname.value);
        //console.log(oMesscontent.value);
        if(oMessname.value&&oMesscontent.value){
            //console.log(111);
            /!*sUlHtml = '<li><span class="messages-name">'+oMessname.value+'</span>' +
                '<span class="messages-content">'+oMesscontent.value+'</span><em>×</em></li>';
            console.log(sUlHtml);*!/
            //oMessageslist.innerHTML = oMessageslist.innerHTML + sUlHtml;
            saveStorage();
        }
        return false;
    }


    /!*var dataBase = openDatabase("use", "1.0", "留言板", 1024 *1024, function () { });
    if (!dataBase) {
        alert("数据库创建失败！");
    } else {
        alert("数据库创建成功");
    }
*!/

    function saveStorage()
    {
        var name = oMessname.value;
        var content = oMesscontent.value;
        //var time = new Date().getTime();//获取时间戳作为key值
        localStorage.setItem(name,content);//添加一条留言
        alert("提交成功");
        loadStorage();
    }
    function loadStorage(){
        sUlHtml = '';
        //var result = '<table border="1px">';
        for(var i = 0;i<localStorage.length;i++){
            //oNum.innerHTML = i;
            //console.log(localStorage);
            var key = localStorage.key(i);
            var value = localStorage.getItem(key);//根据key值 获取对应的留言
            console.log(key);
            console.log(value);
            sUlHtml += '<li><span class="messages-name">'+key+'</span>' +
                '<span class="messages-content">'+value+'</span><em>×</em></li>';
            //var date = new Date();
            //date.setTime(key);
            //var datestr = date.toGMTString();
            //result+='<tr><td>'+value+'</td><td>' + datestr + '</td></tr>';
        }
        /!*result +='</table>';
        document.getElementById(id).innerHTML = result;*!/
        oMessageslist.innerHTML = sUlHtml;
        var oEm = byTagName(oMessageslist,'em');
        console.log(oEm);
        for(var i = 0;i<oEm.length;i++){
            oEm[i].onclick = function () {
                //删除一个li
                console.log(key + '1111');
                oMessageslist.removeChild(this.parentNode);
                localStorage.removeItem(this.parentNode.firstChild.innerHTML);
                oNum.innerHTML = localStorage.length;
                //oMessageslist.removeChild(this.parentNode);

                console.log(this.parentNode.firstChild.innerHTML);
                console.log(this.previousSibling.innerHTML);
            }
        }
        var oNum = $('num');
        oNum.innerHTML = localStorage.length;

    }

    function $(id){
        return document.getElementById(id);
    }
    function byTagName(obj,sTagName){
        return obj.getElementsByTagName(sTagName);
    }
}*/


window.onload = function(){
    var oMessageBoard = document.forms['message-board'];
    var oMessagesList = $('messages-list');

    //读取留言
    if(window.localStorage){
        var aMessage = [];
        //console.log(localStorage.length);
        //console.log(localStorage.key(0));

        //console.log(localStorage.getItem('message'));
        //console.log(localStorage.getItem('num'));
        if(localStorage.getItem('message')){
            //获取的是字符串，转换为数组
            aMessage = JSON.parse(localStorage.getItem('message'));
            //console.log(aMessage);
        }
        var sHtml = '';
        //遍历数组
        aMessage.forEach(function(v,k){
            sHtml += '<li><span class="messages-name">'+ v.name+'</span>' +
                '<span class="messages-content">'+ v.message+'</span><em data-id="'+ v.id+'">×</em></li>'
        })
        //判断是否有内容，如果没有就提示
        oMessagesList.innerHTML = sHtml ? sHtml : '当前没有任何留言';

    }

    //删除留言
    //事件冒泡，加在父元素上，可以让每一个添加的子元素都有删除的功能
    oMessagesList.onclick = function(evt){
        var event = evt || window.event;
        //获取当前的目标元素
        var oTarget = event.srcElement || event.target;

        console.log(oTarget.nodeName);
        if(oTarget.nodeName === 'EM'){
            var iDataid = Number(oTarget.getAttribute('data-id'));
            console.log(iDataid);
            aMessage = JSON.parse(localStorage.getItem('message'));
            aMessage.forEach(function(v,k){
                if(iDataid == v.id){
                    aMessage.splice(k,1);
                }
            });
            localStorage.setItem('message',JSON.stringify(aMessage));
            this.removeChild(oTarget.parentNode);
        }
    }


    //表单提交时，做判断
    oMessageBoard.onsubmit = function(){
        //获取当前的输入内容，这里的username和message是name值
        var sUsername = this.username.value;
        var sMessage = this.message.value;
        //console.log(sUsername);
        //console.log(sMessage);

        //判断username是否为空
        if(sUsername==''){
            alert('用户不能为空');
            return false;
        }

        //判断message是否为空
        if(sMessage==''){
            alert('留言不能为空');
            return false;
        }

        //判断浏览器是否支持本地存储
        if(window.localStorage){
            //获取留言的数量

            //如果num是null则是第一次输入，iNum初始化为0，否则iNum为当前本地存储的数据
            if(!localStorage.getItem('num')){
                var iNum = 0;
            }else {
                iNum = localStorage.getItem('num');
            }
            console.log(iNum);

            //获取留言列表

            //如果留言本地留言内容为空，则建一个新的数组，如若有数据，则把数据拿出来（字符串），转换俄日数组，存入aMessage
            if(!localStorage.getItem('message')){
                var aMessage = [];
            }else {
                aMessage = JSON.parse(localStorage.getItem('message'));
            }

            //新建留言

            //留言每一条唯一的id
            //留言人的名字
            //留言的内容
            var oMessage = {
                id : ++iNum,
                name :sUsername,
                message : sMessage,
            }

            //插入新的Dom节点
            if(aMessage.length === 0){
                oMessagesList.innerHTML = '<li><span class="messages-name">'+sUsername+'</span>' +
                    '<span class="messages-content">'+sMessage+'</span><em data-id="'+iNum+'">×</em></li>'
            }else {
                var oLi = document.createElement('li');
                oLi.innerHTML = '<span class="messages-name">'+sUsername+'</span>' +
                    '<span class="messages-content">'+sMessage+'</span><em data-id="'+iNum+'">×</em>';
                oMessagesList.appendChild(oLi);
            }

            //把每一条新增的留言追加到aMessage数组中
            aMessage.push(oMessage);

            //存储留言
            //存储留言和条数
            localStorage.setItem('num',iNum);
            localStorage.setItem('message',JSON.stringify(aMessage));

        }else {
            alert('你的浏览器太陈旧了')
        }


        //return false;
    }
    function $(id){
        return document.getElementById(id);
    }
}
